<template>
	<diyBase>
		<template #left="{}">
			<div v-loading="loading">
				<div
					class="home-top"
					:style="{ backgroundPositionY: styleBgPositionY, backgroundImage: 'url(' + styleBgImage + ')', backgroundColor: pageInfo.style_color }"
				>
					<div class="search">
						<el-input class="search-input" type="info" placeholder="请输入关键词搜索" :prefix-icon="Search" />
					</div>
					<div class="banner mr-2 ml-2" :class="{ active: pageInfo.active == 'banner' }" @click="changeItem('banner')">
						<el-carousel arrow="never" :height="`${personData.banner.style.height}px`">
							<el-carousel-item v-for="(item, index) in personData.banner.list" :key="index">
								<img class="w-full h-full" v-if="item.image_url" :src="getUrl(item.image_url)" />
							</el-carousel-item>
						</el-carousel>
					</div>
				</div>
				<div class="content mt-2">
					<div class="content-item" :class="{ active: pageInfo.active == 'nav' }" @click="changeItem('nav')">
						<div class="service-box">
							<div class="service-content">
								<div
									v-for="(item, index) in personData.nav.list"
									:key="index"
									class="service-item"
									:class="`w-nav-${personData.nav.style.service_count}`"
								>
									<img class="h-[40px] w-[40px]" v-if="item.icon" :src="getUrl(item.icon)" />
									<div class="name">{{ item.name }}</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="cms mt-2">
					<div class="card-title flex justify-between p-4">
						<div class="text">咨询列表</div>
						<el-text class="mx-1" type="info">查看更多 <SvgIcon name="ele-ArrowRight" size="12" /></el-text>
					</div>
					<div class="item-box bg-white flex px-[10px] py-[16px]" v-for="item in pageInfo.article_list" :key="item.id">
						<div class="mr-[10px]" v-if="item.image">
							<el-image :src="item.image" class="h-[80px] w-[120px]"></el-image>
						</div>
						<div class="item-content flex flex-col justify-between flex-1">
							<div class="item-content-title text-lg font-medium">{{ item.title }}</div>
							<div class="item-content-desc text-gray-400 text-sm mt-[8px]">
								{{ item.desc }}
							</div>
							<div class="text-muted text-xs w-full flex justify-between mt-[12px]">
								<div class="text-ellipsis">{{ item.create_time }}</div>
								<div class="flex items-center">
									<SvgIcon name="ele-View" size="12" />
									<div class="ml-[5px]">{{ item.init_hits + item.actual_hits }}</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="h-[16px]"></div>
			</div>
		</template>
		<template #right="{}">
			<diyHomeNav ref="diyHomeNavRef" @getData="getNavData" />
			<diyHomeBanner ref="diyHomeBannerRef" @getData="getBannerData" />
		</template>
		<template #footer="{}">
			<el-button v-auth="'diy/setHomePageData'" type="primary" @click="handleSubmit">保存</el-button>
		</template>
	</diyBase>
</template>
<script lang="ts" setup name="decorationHome">
import { reactive, ref, onMounted, computed } from 'vue';
import { messageSuccess } from '/@/utils/message';
import { getUrl } from '/@/utils/util';
import { diySetHomePage, diyGetHomePage } from '/@/api/diy';
import { Search } from '@element-plus/icons-vue';
import diyBase from '/@/views/decoration/mobile/component/diyBase.vue';
import diyHomeNav from '/@/views/decoration/mobile/component/diyHomeNav.vue';
import diyHomeBanner from '/@/views/decoration/mobile/component/diyHomeBanner.vue';

const diyHomeNavRef = ref();

const diyHomeBannerRef = ref();

const personData = reactive({
	nav: {
		style: {
			service_count: 3,
		},
		list: [
			{
				name: '',
				icon: '',
				link: '',
			},
		],
	},
	banner: {
		style: {
			height: 0,
		},
		list: [
			{
				name: '',
				image_url: '',
				link: '',
			},
		],
	},
});

const pageInfo = reactive({
	user_avatar: '',
	person_center_top: '',
	active: 'banner',
	article_list: [],
	style_identify: 'blue',
	style_color: '',
});

const loading = ref(true);

const styleBgPositionY = computed(() => {
	return personData.banner.style.height - 45 + 'px';
});

const styleBgImage = computed(() => {
	return pageInfo.style_identify?new URL(getUrl('/resource/admin/images/mobile_' + pageInfo.style_identify + '_bg.png'), import.meta.url).href:'none';
});

const getData = async () => {
	const data = await diyGetHomePage({ type: 1 });
	const navData = data.data?.nav;
	if (navData) {
		for (const key in personData.nav) {
			if (navData[key] != null && navData[key] != undefined) {
				personData.nav[key] = navData[key];
			}
		}
	}

	const bannerData = data.data?.banner;
	if (bannerData) {
		for (const key in personData.banner) {
			if (bannerData[key] != null && bannerData[key] != undefined) {
				personData.banner[key] = bannerData[key];
			}
		}
	}

	const infoData = data?.info;
	if (infoData) {
		for (const key in pageInfo) {
			if (infoData[key] != null && infoData[key] != undefined) {
				pageInfo[key] = infoData[key];
			}
		}
	}

	diyHomeNavRef.value.setData(personData.nav);
	diyHomeBannerRef.value.setData(personData.banner);
	changeItem(pageInfo.active);

	loading.value = false;
};

const getNavData = (data: any) => {
	personData.nav = data;
};

const getBannerData = (data: any) => {
	personData.banner = data;
};

const changeItem = (active: string) => {
	pageInfo.active = active;
	if (active == 'nav') {
		diyHomeNavRef.value.changeDiv(true);
		diyHomeBannerRef.value.changeDiv(false);
	}
	if (active == 'banner') {
		diyHomeBannerRef.value.changeDiv(true);
		diyHomeNavRef.value.changeDiv(false);
	}
};

// 保存提交
const handleSubmit = async () => {
	await diySetHomePage({ type: 1, data: personData });
	getData();
	messageSuccess('设置成功');
};

onMounted(() => {
	getData();
});
</script>
<style lang="scss" scoped>
.diy-box {
	.home-top {
		height: 100%;
		background-size: contain;
		background-repeat: no-repeat;
		background-position-y: 94px;
		padding-bottom: 15px;
	}

	.search {
		padding: 10px;
	}

	.banner {
		border: 2px rgb(220 223 230) dashed;
		z-index: 1000;
	}

	.banner.active {
		border: 2px #4a5dff dashed;
	}

	.content {
		overflow: hidden;
		overflow-y: auto;
		box-sizing: border-box;

		.content-item {
			border: 2px rgb(220 223 230) dashed;
		}

		.content-item.active {
			border: 2px var(--el-color-primary) dashed;
		}

		.service-box {
			border-radius: 4px;
			background-color: #ffffff;

			.service-content {
				display: flex;
				align-items: center;
				flex-wrap: wrap;
				padding: 7px 0;

				.service-item {
					display: flex;
					align-items: center;
					flex-direction: column;
					justify-content: center;
					margin: 9px 0;

					.name {
						margin-top: 5px;
					}
				}

				.w-nav-3 {
					width: 33.3333%;
				}

				.w-nav-4 {
					width: 25%;
				}

				.w-nav-5 {
					width: 20%;
				}
			}
		}
	}

	.cms {
		background-color: white;

		.card-title {
			border-bottom: 1px solid #f8f8f8;

			.text {
				font-size: 18px;
				font-weight: 300;
				line-height: 20px;
			}

			.link {
				font-size: 10px;
				line-height: 20px;
			}
		}

		.item-box {
			border-bottom: 1px solid #f8f8f8;

			.item-content-title {
				text-overflow: ellipsis;
				overflow: hidden;
				word-break: break-all;
				white-space: nowrap;
			}

			.item-content-desc {
				overflow: hidden;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
				word-break: break-all;
			}

			.text-ellipsis {
				max-width: 150px;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
		}
	}
}
</style>
<style lang="scss">
.diy-box {
	.search {
		.search-input {
			.el-input-group__prepend {
				border-radius: 95px;
				border: 0;
				box-shadow: 0 0 0 0px;
			}

			.el-input__wrapper {
				border-radius: 95px;
				background-color: rgb(242, 242, 242);
				border: 0;
				box-shadow: 0 0 0 0px;
			}

			.el-input-group__append {
				border-radius: 95px;
				border: 0;
				box-shadow: 0 0 0 0px;
			}
		}
	}
}
</style>
